<template>
  <div class="parents">
    <ul class="footer">
      <router-link v-for="(i,index) in foot" :key="index" :to="i.push" tag="li" replace>
          <p :class="i.icon"></p>
          <p>{{i.sy}}</p>
      </router-link>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data(){
    return {
      foot:[
            {push:"/rewrite",icon:"iconfont icon-tabhome",reicon:"iconfont",sy:'首页'},
            {push:"/cart",icon:"iconfont icon-qicheqianlian-1",reicon:"iconfont",sy:'购物车'},
            {push:"/order",icon:"iconfont icon-paper-industry",reicon:"iconfont",sy:'订单'},
            {push:"/my",icon:"iconfont icon-user-circle-o",reicon:"iconfont",sy:'我的'}
        ]
    }
  }
}

</script>
<style scoped lang="scss">
  .parents{
    .footer{
          width:100%;
          height:0.49rem;
          flex:1;
          display: flex;
          justify-content: space-around;
          align-items: center;
          position:fixed;
          bottom:0rem;
          li{
              text-align: center;
              p{
                  font-family: PingFangSC-Regular;
                  font-size: 0.11rem;
                  letter-spacing: 0.13px;
                  &:nth-of-type(1){
                      font-size:0.18rem;
                  }
              }
          }
          .active {
            color: #dd3333;
            fill:#dd3333;
            p{
                  font-family: PingFangSC-Regular;
                  font-size: 0.11rem;
                  letter-spacing: 0.13px;
                  &:nth-of-type(1){
                      font-size:0.2rem;
                  }
              }
          }
    }
  }
</style>